<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form class="layui-form " id="reset">
    <input hidden="hidden" name="id" th:value="${id}">
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input id="loginpwd" type="password" name="loginpwd" required lay-verify="required" placeholder="请输入密码"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
            <input id="isloginpwd" type="password" code="" name="" required lay-verify="required"
                   placeholder="两次密码必须一致"
                   autocomplete="off" class="layui-input">
        </div>
        <div id="pwdmsg" class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="resetPwd">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form;

        /*****************************
         * @Description: 验证两次密码输入
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        $("#isloginpwd").blur(function () {
            if ($("#loginpwd").val() == $("#isloginpwd").val() && $("#isloginpwd").val() != "" && $("#loginpwd").val() != "") {
                $("#pwdmsg").html("<i class=\'layui-icon\'>&#xe618;</i>");
                $("#pwdmsg").attr("code", 200);
            } else if ($("#loginpwd").val() != $("#isloginpwd").val() && $("#isloginpwd").val() != "" && $("#loginpwd").val() != "") {
                $("#pwdmsg").html("两次密码输入不匹配");
                $("#pwdmsg").attr("code", 500);
            }
        });
        $("#loginpwd").blur(function () {
            if ($("#loginpwd").val() == $("#isloginpwd").val() && $("#isloginpwd").val() != '' && $("#loginpwd").val() != "") {
                $("#pwdmsg").html("<i class=\'layui-icon\'>&#xe618;</i>");
                $("#pwdmsg").attr("code", 200);
            } else if ($("#loginpwd").val() != $("#isloginpwd").val() && $("#isloginpwd").val() != "" && $("#loginpwd").val() != "") {
                $("#pwdmsg").html("两次密码输入不匹配");
                $("#pwdmsg").attr("code", 500);
            }
        });




        /*****************************
         * @Description: 表单提交
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/18
         *******************************/
        form.on('submit(resetPwd)', function (data) {
            if ($("#pwdmsg").attr("code") != 200) {
                layer.msg("两次密码输入不一致", {icon: 2, anim: 6});
                return false;
            }
            $.ajax({
                url: "/user/resetPwd",
                dataType: "json",
                data: data.field,
                type: "post",
                success: function (data) {
                    if(data.code==200){
                        layer.closeAll();
                        layer.msg(data.msg, {icon: 1, anim: 1});
                    }
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>
</html>